<template>
    <div v-loading = "loading">
        <!-- <el-card class="box-card" v-loading="loading"> -->
            <div slot="header" class="clearfix">
            </div>
            <!-- 两个选择器 -->
            <div class="inputNav">
                <el-select v-model="ranktype" placeholder="请选择" style="width:300px;margin-right:15px;"
                           @change="getRankMsg">
                    <el-option
                            v-for="item in options1"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <el-select v-model="normValue" placeholder="请选择" style="width:300px;margin-right:15px;"
                           @change="changerank()">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <el-select v-model="type" placeholder="请选择" style="width:200px">
                    <el-option
                            v-for="item in options2"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <el-button @click="getRank">确定</el-button>
            </div>
            <!-- 柱状图 -->
            <div class="histogram">
                <div id="main" style="width: 80%;height:600px;"></div>
            </div>

            <div class="histogram">
                <span>{{normValue}}</span>
            </div>
        <!-- </el-card> -->
    </div>
</template>

<style lang="less" scoped>
    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 95%;
        margin: 20px 2.5%;
    }

    .inputNav {
        text-align: center;
    }

    .histogram {
        display: flex;
        justify-content: center;
    }
</style>


<script>
    export default {
        data() {
            return {
                loading:false,
                ranktype: '投入排行',
                options1: [{
                    value: '投入排行',
                    label: 0
                }, {
                    value: 1,
                    label: '产出排行'
                }, {
                    value: 2,
                    label: '绩效排行'
                }],
                options: [
                    {
                        value: '选项1',
                        label: '指标一'
                    }, {
                        value: '选项2',
                        label: '指标二'
                    }, {
                        value: '选项3',
                        label: '指标三'
                    }, {
                        value: '选项4',
                        label: '指标四'
                    }],
                options2: [{
                    value:2,
                    label: '总体'
                }, {
                    value:0,
                    label: '大文类'
                }, {
                    value: 1,
                    label: '大理类'
                }
                ],
                normValue: '选项1',
                rankid: 0,
                type: '总体',
                cg: ['A0', 'A1', 'A2', 'A3', 'A4', 'A5', 'A6'],
                bD: [1218, 2142, 3100, 581, 431, 383, 163],
                color: ['#53bbdc']
            }
        },
        watch: {

        },
        methods: {
            //获取指标数据
            getHistogram: function () {
                var self = this;
                self.loading=true;
            },
            // 渲染柱状图
            histogram: function () {
                var that = this;
                that.loading = true;
                var myChart = echarts.init(document.getElementById('main'));

                //初始化数据
                var category = this.cg;
                var barData = this.bD;

                var option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        }
                    },
                    yAxis: {
                        type: 'category',
                        data: category,
                        splitLine: {show: true},
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        offset: 10,
                        nameTextStyle: {
                            fontSize: 15
                        }
                    },
                    series: [
                        {
                            name: '数量',
                            type: 'bar',
                            data: barData,
                            barWidth: 20,
                            barGap: 10,
                            smooth: true,
                            label: {
                                normal: {
                                    show: true,
                                    position: 'right',
                                    offset: [5, -2],
                                    textStyle: {
                                        color: '#000',
                                        fontSize: 13
                                    }
                                }
                            },
                            itemStyle: {
                                //通常情况下：
                                normal: {
                                    //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                                    color: function (params) {
                                        var colorList = that.color;
                                        return colorList[params.dataIndex];
                                    }
                                },
                            }
                        }
                    ]
                };
                myChart.setOption(option);
                this.loading = false
            },
            getRank() {
                // http://www.rg.com/root/perdata?type=2&p_id=1
                var that = this;
                that.loading = true
                var url = '/watcher/perdata'
                if(this.ranktype == 2)
                    var url = '/watcher/perfordata'
                axios.get(url, {
                    params: {
                        type: isNaN(that.type) ? 2 : that.type,
                        p_id: that.rankid,
                    }
                }).then(res => {
                    if(res.data.code == 0){
                        var data = res.data.result;
                        var dataArr = [];
                        var count = 0;
                        var len = 0;
                        for (var k in data) {
                            dataArr[k] = data[k];
                            count += data[k];
                            len++;
                        }
                        var avg = count / len;
                        avg = parseFloat(avg.toFixed(4));
                        dataArr['平均值'] = avg;

                        var tmp = [];
                        var index_t = 0;
                        for (var k in dataArr) {
                            tmp[index_t] = [k, dataArr[k]]
                            index_t++;
                        }
                        tmp.sort(function (a, b) {
                            if (a[1] < b[1]) {
                                return -1;
                            }
                            if (a[1] > b[1]) {
                                return 1;
                            }
                            return 0;
                        });
                        var ks = [];
                        var v = [];
                        index_t = 0;
                        for (var k in tmp) {
                            ks[index_t] = tmp[k][0];
                            v[index_t] = tmp[k][1];
                            index_t++;
                        }
                        that.cg = ks;
                        that.bD = v;
                        var t_color = [];
                        for (var i = 0; i < ks.length; i++) {
                            if (ks[i] != '平均值') {
                                t_color.push('#53bbdc')
                            } else {
                                t_color.push('#f58c28')
                            }
                        }
                        that.color = t_color;
                        that.histogram();
                    }else{
                        that.message(true, res.data.msg, 'error');
                        that.loading = false;
                    }
                })
            },
            getRankMsg() {
                var that = this;
                that.loading = true;
                axios.get('/watcher/getrankmsg', {
                    params: {
                        type: isNaN(that.ranktype) ? 0 : that.ranktype
                    }
                }).then(res => {
                    if (res.data.code == 0) {
                        that.options = [];
                        for (var i = 0; i < res.data.result.length; i++) {
                            that.options[i] = {value: res.data.result[i].id, label: res.data.result[i].name}
                        }
                        that.normValue = that.options[0].label;
                        that.rankid = that.options[0].value;
                    } else {
                        that.message(true, res.data.msg, 'error');
                    }

                })
            },
            changerank() {
                this.rankid = isNaN(this.normValue) ? that.options[0].value : this.normValue
            },
            init() {
                var that = this;
                axios.get('/watcher/getrankmsg', {
                    params: {
                        type: isNaN(that.ranktype) ? 0 : that.ranktype
                    }
                }).then(res => {
                    if (res.data.code == 0) {
                        that.options = [];
                        for (var i = 0; i < res.data.result.length; i++) {
                            that.options[i] = {value: res.data.result[i].id, label: res.data.result[i].name}
                        } 
                        that.normValue = that.options[0].label;
                        that.rankid = that.options[0].value;
                        that.getRank();
                    } else {
                        that.message(true, res.data.msg, 'error');
                    }

                })

            }
        },
        mounted() {
            let that = this;
            that.loading = true;
            that.init();
        }
    }
</script>